<template>
  <view class="items-container">
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          开始时间：
        </view>
        <view class="uni-list-cell-db">
          <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="uni-input">{{date}}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          结束时间：
        </view>
        <view class="uni-list-cell-db">
          <picker mode="date" :value="date2" :start="startDate2" :end="endDate2" @change="bindDateChange2">
            <view class="uni-input">{{date2}}</view>
          </picker>
        </view>
      </view>
    </view>

    <view class="main-container" v-if="orders.length > 1">
      <view class="image-container" v-for="order in orders" :key="order.id">
        <view class="content">
          <view style="flex-grow: 1;">
            <view>
              <span class="fontstyle">{{order.carNo}}</span>
            </view>
            <view>
              <span class="price-label">入场</span>
              <span class="time-value">{{ order.inTime }}</span>
              <br/>
              <span class="price-label">出场</span>
              <span class="time-value">{{ order.outTime }}</span>
            </view>
          </view>
          <view class="action">
            <span class="price-value self">¥{{ order.balance }}</span>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <text>暂无停车信息</text>
    </view>
  </view>

</template>
<script>
import Vue from "vue";
import { token, user } from '@/util/storage'
export default Vue.extend({
  computed: {
    user: () => JSON.parse(user.get()),
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    },
    startDate2() {
      return this.getDate('start');
    },
    endDate2() {
      return this.getDate('end');
    }
  },
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      orders: [],
      date: currentDate,
      date2: currentDate,
    };
  },
  mounted() {
    this.getCarOrders();
  },
  methods: {
    getCarOrders(data1 = null, data2 = null) {
      this.$mainApi.apiGetCarOrders(data1, data2).then((res) => {
        console.log(res.data.list)
        this.orders = res.data.list;
      });
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : 0 + month;;
      day = day > 9 ? day : 0 + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange: function(e) {
      this.date = e.target.value
    },
    bindDateChange2: function(e) {
      this.date2 = e.target.value
      console.log("start"+ this.data)
      console.log("end"+ this.date2)
      if (this.date != undefined && this.date2 != undefined ) {
        this.getCarOrders(this.date, this.date2);
      } else {
        uni.showToast({
          title: '请选择正确的日期',
          duration: 2000
        });
      }
    },
  },
});
</script>
<style>
.items-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.items-container .title {
  font-size: 20px;
  border-left: 5px solid #006b65;
  margin-bottom: 15px;
  margin-left: 15px;
  margin-top: 15px;
  padding-left: 15px;
}

.items-container .image-container {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  border-bottom: #ccc solid 1px;
}
.image-container {
  margin-bottom: 15px;
}
.image-container .content {
  display: flex;
}
.image-container .content .action button {
  padding: 0px 15px;
  margin-left: 5px;
}
.image-container .images {
  flex-grow: 1;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.fontstyle {
  font-family: PingFangSC-Medium;
  font-size: 15px;
}
.fontstyle2 {
  font-family: Medium;
  font-size: 10px;
}

.fontstyle3 {
  font-family: PingFangSC-Medium;
  color: #ff6c00;
  font-size: 15px;
}

.header-container {
  color: #333333;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right img {
  width: 16px;
  height: 16px;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  width: 100%;
  position: relative;
}

.appointment-btn {
  color: #ffffff;
  background-color: #006b65;
  border-color: #006b65;
}

.empty-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.empty-container img {
  width: 40%;
  margin-bottom: 15px;
}

.empty-container .tips {
  color: #9A9A9A;
  font-size: 16px;
}

.empty-container .toselect-btn {
  color: #FFFFFF;
  font-size: 14px;
  margin-top: 15px;
  padding: 10px;
  background-color: #006b65;
  border-radius: 6px;
}

.price-label {
  font-size: 12px;
  margin-right: 5px;
}

.price-value {
  font-size: 14px;
  margin-right: 10px;
}
.time-value {
  font-size: 11px;
  margin-right: 10px;
}

.price-value.self {
  color: #006b65;
}

.uni-list {
  background-color: #fff;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.uni-list-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.uni-list-cell-left {
  white-space: nowrap;
  font-size: 14px;
  padding: 0 15px;
}
.uni-list-cell-db, .uni-list-cell-right {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.uni-list-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>